<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>最佳实践</title>
  <style>
    p, li {
      line-height: 40px
    }
    span {
      color: red
    }
  </style>
</head>
<body>
  <p>
    Web开发过去曾经是荒芜地带，而现在已经演化成了完整的研究规范，并建立了种种最佳实践
  </p>
  <h2>可维护性</h2>
  <p>
    编写可维护性代码很重要，因为开发人员都花费大量时间维护他人代码。很难从头开始开发新代码。很多情况下是以他人的工作成果为基础的。确保自己的代码的可维护性，以便其他开发人员在此基础上更好的开展工作
  </p>
  <h3>什么是可维护性代码</h3>
  <ul>
    <li>可理解性-其他人可以接手代码并理解它的意图和一般途径，而无需原开发人员的完整解释</li>
    <li>直观性-代码中的东西一看就能明白，不管其操作过程多么复杂</li>
    <li>可适应性 - 在代码架构上已考虑到未来允许对核心功能进行扩展</li>
    <li>可调式性-当有的地方出错时，代码可以给予你足够的信息来尽可能直接地确定问题所在</li>
  </ul>
  <h3>代码约定</h3>
  <ul>
    <li>代码要想可读，首先必须可读</li>
    <li>统一代码书写约定：缩进，分号，eslint, jslint等等</li>
    <li>注释：函数， 大段代码实现的功能， HACK。</li>
    <li>不要设想其他人在看代码的时候能够理解你自己代码的功能，要将这些信息放在注释里</li>
    <li>函数命名，函数名应该以动词开始，返回布尔值的函数应该以is开头</li>
    <li>变量名使用客户逻辑的名字，不用担心长度，长度问题会通过压缩代码的方式得以解决</li>
    <li>合适的命名初始化，可以提示开发者变量所应包含的数据类型</li>
    <li>避免在JS中创建大量的HTML，可以先在页面中直接包含并隐藏标记。然后根据情况显示隐藏</li>
    <li>解耦应用逻辑和事件：将应用逻辑再定义一个function</li>
    <li>勿将event对象传给其他方法，只传来自event对象中所需的数据</li>
    <li>任何可以再应用层面进行的动作，应该都可以在不执行任何事件处理程序的情况下执行</li>
    <li>任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑</li>
  </ul>
  <h3>编写代码需要注意的几点</h3>
  <ul>
    <li>最终对象的所有权: 如果你不负责创建或者维护某个对象、它的对象或者它的方法，那么你就不能对它们进行修改</li>
    <li>
      不建议给原生对象添加方法或者修改其属性。因为你不确定浏览器将来会如何修改原生对象。你的操作可能会覆盖掉正确的原生方法
    </li>
    <li>
      避免全局变量：最多创建一个全局变量，让其他变量和函数存在其中。
    </li>
    <li>
      vue的data属性，每一块功能，对应一个object.不要单个命名，不好理解功能，不好维护
    </li>
    <li>
      <h3>常量</h3>
      <ul>
        <li>
          任何在多处用到的值都应该抽取为一个常量。这就避免了当一个值变了而另一个值没变而造成的错误包括CSS类名
        </li>
        <li>
          任何用于显示给用户的字符串，都应该被抽取出来以方便国际化
        </li>
        <li>
          URLS：在Web应用中，资源位置很容易变更，推荐在一个公共地方存放所有的URL
        </li>
        <li>
          任何可能更改的值-如果一个变量的值在将来会变化，那么这个值就应该提取出来作为一个常量
        </li>
      </ul>
    </li>
  </ul>
</body>
</html>